<template>
  <el-dialog class="rod-editor" :visible="isVisible" :title="rodForm.id ? '编辑一体杆' : '添加一体杆'" @close="onCloseDialog">
    <el-form ref="rodFormRef" :model="rodForm" :rules="rodRules" size="medium">
      <!-- 一体杆名称 -->
      <el-form-item label="一体杆名称：" prop="poleName">
        <el-input v-model="rodForm.poleName" placeholder="请输入一体杆名称" />
      </el-form-item>
      <!-- 一体杆编号 -->
      <el-form-item label="一体杆编号：" prop="poleNumber">
        <el-input v-model="rodForm.poleNumber" placeholder="请输入一体杆编号" />
      </el-form-item>
      <!-- 一体杆Ip -->
      <el-form-item label="一体杆Ip：" prop="poleIp">
        <el-input v-model="rodForm.poleIp" placeholder="请输入一体杆Ip" />
      </el-form-item>
      <!-- 物业费 -->
      <el-form-item label="关联区域：" prop="areaId">
        <el-select v-model="rodForm.areaId" placeholder="请选择关联区域">
          <el-option v-for="item in areaList" :key="item.areaName" :label="item.areaName" :value="item.areaId" />
        </el-select>
      </el-form-item>
      <!-- 一体杆类型 -->
      <el-form-item label="一体杆类型：" prop="poleType">
        <el-select v-model="rodForm.poleType" placeholder="请选择一体杆类型">
          <el-option label="入口" value="entrance" />
          <el-option label="出口" value="export" />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <el-button type="primary" size="medium" @click="onSaveRod">确定</el-button>
      <el-button size="medium" @click="onCloseDialog">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { updateRodAPI, addRodAPI } from '@/api/rod/manage'
import { getAreaSelectListAPI } from '@/api/car/cararea'

export default {
  name: 'RodEditor',
  data() {
    return {
      isVisible: false, // 是否显示弹窗
      // 一体杆表单数据
      rodForm: {
        poleName: '', // 一体杆名称
        poleNumber: '', // 一体杆编号
        poleIp: '', // 一体杆Ip
        areaId: '', // 关联区域Id
        poleType: '' // 一体杆类型
      },
      // 一体杆数据校验规则
      rodRules: {
        poleName: [
          { required: true, message: '请输入一体杆名称', trigger: 'blur' }
        ],
        poleNumber: [
          { required: true, message: '请输入一体杆编号', trigger: 'blur' }
        ],
        poleIp: [
          { required: true, message: '请输入一体杆Ip', trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '请选择关联区域', trigger: 'blur' }
        ],
        poleType: [
          { required: true, message: '请选择一体杆类型', trigger: 'blur' }
        ]
      },
      areaList: [] // 关联区域下拉列表数据
    }
  },
  created() {
    // 获取关联区域下拉列表数据
    this.getAreaSelectList()
  },
  methods: {
    // 获取关联区域下拉列表数据
    async getAreaSelectList() {
      this.areaList = await getAreaSelectListAPI()
    },
    // 打开弹窗
    open(row) {
      if (row.id) {
        this.rodForm = { ...row }
        delete this.rodForm.areaName
        delete this.rodForm.poleStatus
      }
      this.isVisible = true
    },
    // 保存一体杆
    onSaveRod() {
      // 校验表单
      this.$refs.rodFormRef.validate(async valid => {
        if (valid) {
          // 根据id是否存在来判断是添加还是编辑
          if (this.rodForm.id) {
            // 编辑一体杆
            await updateRodAPI(this.rodForm)
            this.$message.success('编辑成功')
          } else {
            // 添加一体杆
            await addRodAPI(this.rodForm)
            this.$message.success('添加成功')
          }
          // 通知父组件刷新一体杆列表
          this.$emit('update-list')
          this.onCloseDialog()
        }
      })
    },
    onCloseDialog() {
      this.isVisible = false
      // 重置表单
      this.rodForm = {
        poleName: '', // 一体杆名称
        poleNumber: '', // 一体杆编号
        poleIp: '', // 一体杆Ip
        areaId: '', // 关联区域Id
        poleType: '' // 一体杆类型
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 500px;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      font-size: 16px;
      color: #303133;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 20px;
    .el-form {
      padding: 0 50px;
      .el-select {
        width: 100%;
      }
    }
  }
  .el-dialog__footer {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    border-radius: 0 0 10px 10px;
  }
}
</style>
